<template>
  <el-container>
    <el-main style="padding: 0;">
      <el-table height="300px" ref="table" :data="dataTable.result" border style="width: 100%" @select="select" @select-all="selectAll" highlight-current-row>
        <el-table-column type="selection" width="40" :selectable="selectable">
        </el-table-column>
        <el-table-column prop="displayName" label="姓名" width="150"></el-table-column>
        <el-table-column prop="loginName" label="登录名" width="150"></el-table-column>
        <el-table-column prop="cellphone" label="手机号" width="200"></el-table-column>
        <el-table-column prop="secEmail" label="邮箱" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userStatus" label="用户状态" width="100">
          <template slot-scope="scope">
            {{ userStatus.singleOrDefault(t=>t.value == scope.row.userStatus).label }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="200"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间" header-align="center" align="center" width="200"></el-table-column>

      </el-table>
    </el-main>
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount" ></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>

export default {
  data() {
    return {
      queryObject: {
        pageIndex: 1,
        pageSize: 10,
        sortFields: {
          "ModuleId": true,
        },
        parameters: {
          keyword: null,
          userStatus: null
        },
      },
      dataTable:{
        result: [],
        pageIndex: 1,
        pageSize: 20,
        pageCount: 0,
        rowCount: 0
      },
      selectedItems: []
    }
  },
  props:{
    inclusionUsers:{
      type: Array,
      default: []
    }
  },
  computed: {
  },
  created() {
    this.query();
  },
  methods: {
    selectable(row, index){
      return !this.inclusionUsers.any(t => t.userId == row.userId);
    },
    select(selection, row){
      if (selection.any(t => t.userId == row.userId))
        this.selectedItems.push(row.userId);
      else
        this.selectedItems.remove(row.userId);

    },
    selectAll(selection){
      if (selection.length > 0){
        this.dataTable.result.forEach((row) => {
          if (!this.selectedItems.any(t => t.userId == row.userId))
            this.selectedItems.push(row.userId);
        });
      }
      else{
        this.dataTable.result.forEach((row) => {
          this.selectedItems.remove(row.userId);
        });
      }
    },
    query(){
      this.$service.user.query({data:this.queryObject}).then(r =>{
        if (r.success){
          this.dataTable = r.data;
          this.$nextTick(()=>{
            this.dataTable.result.forEach(row => {
              if (this.selectedItems.any(t=> t == row.userId)){
                this.$refs.table.toggleRowSelection(row, true);
              }
            });
          });
        }
      });
    },
    clearConditions(){
      if (this.queryObject.parameters.keyword != this.keyword) this.query();
    },
    clearSelection(){

      this.selectedItems = [];
    },
    getSelection(){
      let items = this.selectedItems;
      this.clearSelection();
      return items;
    }
  }
}
</script>
